<template>
  <el-container style="height: 520px">
    <el-header>
      <vab-query-form-top-panel>
        <el-form
          inline
          label-width="49px"
          :model="queryList"
          style="margin-top: 5px"
          >
          <el-select placeholder="---请选择品牌---" v-model="queryList.BrandCode" style="width: 180px">
                            <el-option label="---请选择品牌---" value="" />
                            <el-option v-for="item in optionsBrand" :key="item.value" :label="item.label" :value="item.value" />
                        </el-select>
          &nbsp;
          <el-input
            v-model="queryList.Code"
            placeholder="请输入分类编码"
            style="width: 180px"
          ></el-input>
          &nbsp;
          <el-input
            v-model="queryList.Name"
            placeholder="请输入分类名称"
            style="width: 150px"
          ></el-input>
          &nbsp;

          <el-button type="primary" @click="$refs.mytable.getData()"
            >查询</el-button
          >
        </el-form>
      </vab-query-form-top-panel>
    </el-header>
    <el-foot>
      <scTable
        ref="mytable"
        :data="listData"
        :attrList="attrList"
        :valueList="valueList"
        :queryList="queryList"
        :sort-orders="['ascending', 'descending']"
        @selection-change="selectionChange"
        row-key="Code"
        key="Code"
        stripe
        :hideDo="true"
        height="480px"
        style="max-height: 480px; min-width: 420"
      >
        <el-table-column type="selection" width="50" :selectable="selectable">
          <!-- <template #default="scope">
            <el-checkbox :disabled="scope.row.ParentCode=='00'"></el-checkbox>
          </template> -->
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          prop="rownumber"
          width="50"
        ></el-table-column>
        <el-table-column
          label="品牌编码"
          prop="BrandCode"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          prop="BrandName"
          width="150"
          sortable
        ></el-table-column>
        <el-table-column
          label="分类编码"
          prop="Code"
          width="100"
          sortable
        ></el-table-column>
        <el-table-column
          label="分类名称"
          prop="Name"

          sortable
        >
        <template #default="scope">
                        <label v-if="scope.row.ParentCode=='00'" style="font-size: 14px;font-weight: bold;color:red;">
                            {{ scope.row.Name }}
                        </label>
                        <label v-else style="margin-left:30px;font-size: 14px;font-weight: bold;color:darkgreen;">
                            {{ scope.row.Name }}
                        </label>

                    </template>
      </el-table-column>


        <el-table-column
          label="状态"
          prop="State"
          width="100"
        >
							<template #default="scope">
								<el-switch v-model="scope.row.State" disabled active-value="启用" inactive-value="禁用" />
							</template>
      </el-table-column> </scTable
    ></el-foot>
  </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
  name: "typelist",
  components: {
    publicjs,
  },
  props: {
  	BrandCode: { type: String, default: "" },
  },
  data() {
    return {
      selectionRows: [],
      pkList: ["Code"],
      attrList: {
        Name: "BrandGoodsType",
        UseDistinct: false,
        OrgCode: "",
        UseBackUp: false,
        UseGroup: false,
      },
      valueList: {
        Code: "Code",
        Name: "Name",
        ParentCode:"ParentCode",
        BrandCode:"BrandCode",
        BrandName:"BrandName",
        State: "State",
      },
      queryList: {
        Name: "",
        BrandCode: this.BrandCode,
        BrandName: "",
        State: "",
      },
      result: "", // 运行结果
      props1: {
        checkStrictly: true,
        emitPath: false,
      },
      optionsBrand:[],
    };
  },
  methods: {
    //表格选择后回调事件
    selectionChange(selection) {
      this.selectionRows = selection;
    },

    async opBindData() {
      this.$refs.mytable.clearSort();
      this.$refs.mytable.getData();
    },

    formatterState(rowData) {
      // eslint-disable-next-line no-debugger
      //debugger;
      switch (rowData.State) {
        case "0":
          return "禁用";
        case "1":
          return "启用";
        default:
          return "";
      }
    },
    async initBrandOptions() {
            var head = new publicjs.head();
            publicjs.initHead(head, "getfirstdatasource");
            var ed = new publicjs.entitydata(head);
            var eo = new publicjs.entityobj();
            eo.AttrList = {
                Name: "Brand",
                AcceptControl: "Code",
                OrgCode: "",
            };
            ed.Data.Content.ObjectList.Object.push(eo);

            try {
                var returnValueStr = await this.$API.auth.objProcess.post(ed);
                var returnValue = JSON.parse(returnValueStr);
                if (returnValue.Result.OpFlag == "1") {
                    var objectList = returnValue.Result.Content.ObjectList.Object;
                    this.optionsBrand = objectList.rows.row;

                } else {
                    this.$message.error("操作失败:" + returnValue.Result.OpMsg);
                }
            } catch (error) {
                this.loading = false;
                this.$alert(error.message, "提示1", { type: "error" });
                return false;
            }
    },
    selectable(row)
    {
      if(row.ParentCode=='00')
      {
        return false;
      }
      return true;
    }

  },
  async mounted() {
    await this.opBindData();
    await this.initBrandOptions();
  },
};
</script>
